<template>
  <div class="page page-vip">

    <div class="baseinfo h-45 flex justify-between items-center px-40 border-box">
      <div class="userinfo text-center w-70 h-35 p-t-6" v-if="userInfo?.id">
        <img :src="userInfo?.avatar" alt="" class="avatar w-18 h-18 mx-auto" />
        <span class="name">{{ userInfo?.nickname }}</span>
      </div>
      <div class="balanceinfo w-155 h-35 p-l-12  p-t-6">
        <div class="line line-hd flex items-center">
          <div class="text">我的特权</div>
          <div :class="[vipType]" class="vipicon w-6 h-6 m-l-2"></div>
        </div>
        <div class="line line-bd">
          积分：{{ totalBalance }}
        </div>
        <div class="line line-bd">
          身份：{{ balanceInfo.vipTypeStr }}
          <span v-if="balanceInfo.expireTime">
            {{ balanceInfo.expireTime }}到期

          </span>
          <span v-else>
          </span>

        </div>
      </div>
    </div>
    <div class="vipproduct">
      <div class="hd"></div>
      <div class="bd">
        <div class="cards">
          <div class="card card1">
            <div class="card-hd card-hd1">
              一日VIP
            </div>
            <div class="card-bd">
              <div class="price">
                <span class="unit">¥</span>
                <span class="num">9.9</span>
              </div>
              <div class="rawprice">原价¥19.9</div>
              <div class="btn" @click="buyVip('day')">开通</div>
            </div>
          </div>
          <div class="card card2">
            <div class="card-hd card-hd2">
              月度VIP
            </div>
            <div class="card-bd">
              <div class="price">
                <span class="unit">¥</span>
                <span class="num">29</span>
              </div>
              <div class="rawprice">原价¥49</div>
              <div class="btn" @click="buyVip('month')">开通</div>
            </div>
          </div>
          <div class="card card3">
            <div class="card-hd card-hd3">
              季度VIP
            </div>
            <div class="card-bd">
              <div class="price">
                <span class="unit">¥</span>
                <span class="num">69</span>
              </div>
              <div class="rawprice">原价¥149</div>
              <div class="btn" @click="buyVip('quarter')">开通</div>
            </div>
          </div>
          <div class="card card4">
            <div class="card-hd card-hd4">
              年度VIP
            </div>
            <div class="card-bd">
              <div class="price">
                <span class="unit">¥</span>
                <span class="num">249</span>
              </div>
              <div class="rawprice">原价¥499</div>
              <div class="btn" @click="buyVip('year')">开通</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <ClientOnly>

    <el-dialog v-model="payModalVisible" title="" width="500" class="paymodal">
      <div class="panel">
        <div class="paycon">
          <div class="paycon-hd m-b-5">微信支付¥{{ payInfo.amountStr }}</div>
          <div class="qrcon flex justify-center">
            <QRCodeVue3 v-if="payInfo.code_url" :value="payInfo.code_url" :options="{ width: 200 }" :width="200"
              :height="200"></QRCodeVue3>
          </div>
          <div class="paycon-bd  m-t-5">使用微信扫描二维码进行支付</div>
        </div>
      </div>
    </el-dialog>
    <el-dialog v-model="paySuccessVisible" title="支付成功" width="606" class="paysuccessmodal">
      <div class="panel">
        <div class="introcon">
          <div class="intro">
            请及时添加侯老师微信，便于后续沟通

          </div>
          <div class="qrcode">

          </div>

        </div>
      </div>
    </el-dialog>
  </ClientOnly>

</template>
<script lang="ts" setup>
import { useAppStore } from "~/stores/app";
let app = useAppStore();
let { info: appInfo, balanceInfo, totalBalance } = toRefs(app);
let { toggleLoginModal, refreshBalance, } = app;
import QRCodeVue3 from "qrcode-vue3";
import { postUserAiOrder, postUserGetOrderDetail } from "../../service/yapi";
const { data: userInfo, token, getSession } = useAuth();
let vipType = computed(() => {
  let { payBalance } = balanceInfo.value
  return payBalance == 0 ? `vip0` : `vip1`
})
let router = useRouter();

let payModalVisible = ref(false)
let paySuccessVisible = ref(false)
let payInfo = ref({
  orderId: "",
  amountStr: "",
  description: "",
  orderComment: "",
  code_url: ""
})
let timer = ref<any>(null)
let buyVip = async (type: string) => {
  console.log("%c Line:135 🥕 type", "color:#42b983", type);


  let tId: any;
  if (type == 'day') {
    tId = 42;
  }
  if (type == 'month') {
    tId = 43;
  }
  if (type == 'quarter') {
    tId = 44;
  }
  if (type == 'year') {
    tId = 45;
  } {

  }
  if (token.value) {
    console.log("%c Line:157 🍉 tId", "color:#3f7cff", tId);
    let res: any = await postUserAiOrder({
      tId
    })

    if (res.code == 1000) {
      payInfo.value = res.data
      payModalVisible.value = true
      timer.value = setInterval(() => {
        postUserGetOrderDetail({
          orderId: payInfo.value.orderId
        }).then(async (res: any) => {
          let data = res.data;
          if (data.orderStatus == 100) {
            // @ts-ignore
            await refreshBalance()
            payModalVisible.value = false;
            paySuccessVisible.value = true;
            ElMessage.success("支付成功")
            clearInterval(timer.value)


          }
        }).catch(err => {

        })

      }, 1000)
    } else {
      ElMessage.error(res.message)
    }
  } else {
    ElMessage.warning('请先登录')
    toggleLoginModal()
  }




}
definePageMeta({ auth: false });
</script>
<style lang="scss">
.page-vip {
  background: #fff;

  .baseinfo {
    background: linear-gradient(180deg, #FEF6E5 0%, #FFF9ED 99%);

    .userinfo,
    .balanceinfo {
      background: linear-gradient(180deg, #CCE6FF 0%, rgba(204, 230, 255, 0) 100%);
      box-sizing: border-box;
      border: 1px solid #AFD4FE;
      border-radius: 10px;
    }

    .balanceinfo {
      .line-hd {
        color: #1C2336;
        font-size: 20px;

        .vipicon.vip1 {
          background: url('https://cdn.codinghou.cn/coding/pc-ai/icons/icon_Vip1.png') no-repeat center center;
          background-size: cover;
        }

        .vipicon.vip0 {
          background: url('https://cdn.codinghou.cn/coding/pc-ai/icons/icon_noVip.png') no-repeat center center;
          background-size: cover;

        }

      }

      .line-bd {
        @apply m-t-2;
        font-size: 14px;
        color: #7A4916;

      }
    }
  }

  .vipproduct {
    height: 720px;
    background: url('https://cdn.codinghou.cn/coding/pc-ai/icons/bg-momovip.jpg') no-repeat center top;
    background-size: 100% auto;
    box-sizing: border-box;
    padding-top: 127px;

    .hd {
      width: 900px;
      height: 114px;
      margin: 0 auto;
      background: url('https://cdn.codinghou.cn/coding/pc-ai/icons/AI-banner4.png') no-repeat center center;
      background-size: 100% auto;
    }

    .bd {
      padding-top: 96px;
    }
  }


  .cards {
    display: flex;
    justify-content: space-between;
    padding: 0px 160px;
    flex-wrap: wrap;

    .card {
      width: 216px;
      height: 300px;
      border-radius: 20px;
      opacity: 1;
      overflow: hidden;
      box-sizing: border-box;
      // border: 1px solid #ffffff;
      background: #ffffff;

      &.card1 {
        .card-hd {
          background: linear-gradient(270deg, #d8deec 0%, #ecf0fa 100%);
        }
      }

      &.card2 {
        .card-hd {
          background: linear-gradient(90deg, #dae9ee 0%, #88b9c8 100%);
        }

        .card-bd .btn {
          background: #4592a8;
          color: #fff;
        }
      }

      &.card3 {
        .card-hd {
          background: linear-gradient(270deg, #f9d6bb 0%, #faeee2 100%);
        }

        .card-bd .btn {
          background: linear-gradient(270deg, #f7cba6 0%, #faeee2 100%);
          border-color: transparent;
          color: #653f24;
        }
      }

      &.card4 {
        .card-hd {
          background: linear-gradient(270deg, #0c0d0f 0%, #3c4049 100%);
          color: #f8d19b;
        }

        .card-bd .btn {
          background: linear-gradient(270deg, #2c2d31 0%, #4e4e52 100%);

          border-color: transparent;
          color: #f8d19b;
        }
      }

      .card-hd {
        height: 100px;
        opacity: 1;
        font-size: 28px;
        font-weight: 600;
        line-height: 100px;
        letter-spacing: 0em;
        color: #1c2336;
        text-align: center;
      }

      .card-bd {
        text-align: center;
        padding-top: 25px;

        .price {
          color: #1c2336;

          .num {
            font-size: 36px;
          }
        }

        .rawprice {
          text-decoration: line-through;
          color: #a4a7ae;
          font-size: 16px;
        }

        .btn {
          width: 118px;
          height: 39px;
          border-radius: 8px;
          line-height: 32px;
          opacity: 1;

          box-sizing: border-box;
          border: 2px solid #4592a8;
          margin: 0 auto;
          margin-top: 30px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>